const createNavBar = () => {
    // 添加NavBar Wrapper
    const abstractWrapper = document.createElement('div');
    abstractWrapper.className = "site-nav";
    const container = document.createElement('div');
    container.className = "site-nav-container";

    // 添加菜单按钮
    const menuToggleWrapper = document.createElement('div');
    menuToggleWrapper.className = "site-nav-mobile-menu-toggle site-nav-mobile-toggle";
    const menuToggleIcon = document.createElement('img');
    menuToggleIcon.src = "./imgs/icon-menu.svg";
    menuToggleIcon.width = 18;
    menuToggleWrapper.appendChild(menuToggleIcon);
    container.appendChild(menuToggleWrapper);

    // 添加Logo
    const logoWrapper = document.createElement('div');
    logoWrapper.className = "site-nav-mobile-logo"
    const logoImg = document.createElement('img');
    logoImg.src = "./imgs/logo-black.svg"
    logoImg.className = "site-nav-logo";
    logoImg.width = 76;
    logoWrapper.appendChild(logoImg);
    container.appendChild(logoWrapper);

    // 添加登录按钮
    const loginToggleWrapper = document.createElement('div');
    loginToggleWrapper.className = "site-nav-mobile-toggle"
    const loginToggle = document.createElement('a');
    loginToggle.innerHTML = "Sign In";
    loginToggleWrapper.appendChild(loginToggle);
    container.appendChild(loginToggleWrapper);

    abstractWrapper.appendChild(container);
    return abstractWrapper;
}

export default createNavBar;